<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用属性</title>
</head>
<style>
    /* 清除默认样式 */
    html,body{
        /* 外间距 */
        margin: 0;
        /* 内间距 */
        padding: 0;
    }
    #main{
        /* div1,2,3的父元素 */
        /* 背景色 */
        /* background-color:black; */
        /* 边框 */
        border: 1px solid black;
        /* 把行高设置为全屏幕的100% */
        /* 整体的实际高度 100vh+2px 故有滚动条*/
        /* height: 100vh; */
        /* 修改整体实际高度为100vh，用calc但中间必须有空格 */
        height: calc(100vh - 2px);
    }
    #div1,#div2,#div3{
        color: white;
        /* 一行内显示 */
        /* display: inline; */
        /* 一行内显示，但有宽度 */
        display: inline-block;
        width: 30%;
        height: 30%;
    }
    #div1{
        background-color: rgb(255, 0, 0);
        /* 行内显示 */
        /* display: inline; */
        /* 设置的宽高无效 */
        /* width: 100px; */
        /* font-size: 50px; */
        /* 加入滚动条，可以向下翻动 */
        /* overflow: auto; */
    }
    #div2{
        background-color: aqua;
        /* 隐藏元素，不占空间 */
        /* display: none;  */
        /* 隐藏元素，占用空间 */
        /* visibility: hidden; */
        /* 透明度(0-1)-隐藏元素，占用空间 */
        opacity: 1;
    }
    #div3{
        background-color: aquamarine;
    }
</style>
<body>
    <div id="main">
        <div id="div1">
            div1
        </div>
        <div id="div2">
            div2
        </div>
        <div id="div3">
            div3
        </div>
    </div>
</body>
</html>